<template>
  <el-form :model="form" ref="ruleFormRef" :label-position="labelPosition" label-width="125px" :inline="true"
    :rules="rules" status-icon class="demo-form-inline">
    <el-form-item label="标准名称:" prop="name">
      <el-input  v-model="form.name" maxlength="50" placeholder="请输入"    show-word-limit clearable  />
    </el-form-item>
    <el-form-item label="标准代码:" prop="code">
      <el-input  v-model="form.code" maxlength="50" placeholder="请输入"   show-word-limit clearable  />
    </el-form-item>
<!--    bug号1857要求说明把之前的改过的代码全部回退留存于此-->
    <el-form-item label="标准版本号:" prop="version">
      <el-input  v-model="form.version" maxlength="19" placeholder="请输入"  />
    </el-form-item>
    <el-form-item label="标准级别:" prop="levelName">
      <SelectOption :selectValue="form.levelName" :options="data.orgAllList" @change-value="changeValue"> </SelectOption>
    </el-form-item>
    <el-form-item label="标准类别:" prop="classType">
      <SelectOption :selectValue="form.classType" :options="data.typeOptions" @change-value="changeValue1"> </SelectOption>
      <!-- <el-input v-model="form.phone" maxlength="15" /> -->
    </el-form-item>
    <el-form-item label="现处阶段:" prop="currentStage">
      <SelectOption :selectValue="form.currentStage" :options="data.currentStage" @change-value="changeValue2"> </SelectOption>
    </el-form-item>
    <el-form-item style="width: 61%" label="业务板块:" prop="business">
      <SelectOption :selectValue="form.business" :options="data.business" @change-value="changeValue3">
      </SelectOption>
    </el-form-item>

    <el-form-item label="参编情况:" prop="editCondition">
      <SelectOption :selectValue="form.editCondition" :options="data.editCondition" @change-value="changeValue4"> </SelectOption>
    </el-form-item>
    <el-form-item label="立项时间:" prop="projectApprovalDate">
      <el-date-picker v-model="form.projectApprovalDate" format="YYYY-MM-DD" type="date" placeholder="选择日期" clearable
        @change="handleChangeDate" />
    </el-form-item>

    <el-form-item label="发布时间:" prop="publicDate">
<!--    <el-form-item label="发布时间:" >-->
      <el-date-picker v-model="form.publicDate" format="YYYY-MM-DD" type="date" placeholder="选择日期" clearable
        @change="handleChangeDate1" />
    </el-form-item>

    <el-form-item label="生效日期:">
      <el-date-picker v-model="form.effectDate" format="YYYY-MM-DD" type="date" placeholder="选择日期" clearable
        @change="handleChangeDate2" />
    </el-form-item>

    <el-form-item label="失效日期:">
      <el-date-picker v-model="form.failureDate" format="YYYY-MM-DD" type="date" placeholder="选择日期" clearable
        @change="handleChangeDate3" />
    </el-form-item>
    <el-form-item label="开始时间:">
      <el-date-picker v-model="form.startDate" format="YYYY-MM-DD" type="date" placeholder="选择日期" clearable
        @change="handleChangeDate4" />
    </el-form-item>
    <el-form-item label="结束时间:">
      <el-date-picker v-model="form.endDate" format="YYYY-MM-DD" type="date" placeholder="选择日期" clearable
        @change="handleChangeDate5" />
    </el-form-item>
    <!-- <el-form-item label="中咨承担单位:" label-width="100px" style="width: 30%" prop="undertakeUnit">
      <SelectOption :selectValue="form.undertakeUnit" :options="data.constructSelect" @change-value="changeValue5"> </SelectOption>
    </el-form-item> -->
    <el-form-item label="中咨承担单位:" prop="undertakeUnit">
      <popup-tree-input
        :data="data.popupTreeData"
        :props="data.popupTreeProps"
        :prop="
        deptForm.parentName == null
        ? $t('message.org.top_menu')
        : form.undertakeUnit
        "
        :node-key="'' + deptForm.parentId"
        :current-change-handle="handleTreeSelectChange"
        />
    </el-form-item>

    <el-form-item label="项目负责人:" prop="projectChanger">
      <el-input v-model="form.projectChanger" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="联系人:" prop="contact" >
<!--    <el-form-item label="联系人:" >-->
<!--       <SelectOption :selectValue="form.contact" :options="data.stateSelect" @change-value="changeValue6"></SelectOption> -->
      <user-list-modal
        v-model="form.contact"
        @update:modelValue="changeValue6"
        :default-users="[]"
        :multiple="false"
        :devType="'platform'"
      />
    </el-form-item>


    <el-form-item label="管理机构:" prop="managerUnit">
      <el-input v-model="form.managerUnit" placeholder="标准组织单位"  maxlength="100" show-word-limit  />
    </el-form-item>
    <el-form-item label="署名单位:" prop="renameUnit" >
      <!-- <SelectOption :selectValue="form.renameUnit" :options="data.constructSelect" @change-value="changeValue7"> </SelectOption> -->
      <popup-tree-input
        :data="data.popupTreeData"
        :props="data.popupTreeProps"
        :prop="
            deptForm.parentName == null
            ? $t('message.org.top_menu')
            : form.renameUnit
          "
        :node-key="'' + deptForm.parentId"
        :current-change-handle="changeValue7"
        />
    </el-form-item>
    <el-form-item label="署名排名:"  prop="renameRank">
      <el-input type="number" :min="1" v-model="form.renameRank"  placeholder="请输入"  maxlength="5" show-word-limit />
    </el-form-item>

    <el-form-item label="专业方向:" style="width: 61%">
      <el-input v-model="form.major"  placeholder="请输入"  maxlength="50" show-word-limit clearable />
    </el-form-item>
    <el-form-item label="考核要求:" class="labelHeight" style="width: 100%">
      <el-input v-model="form.checkRequirement" :autosize="{ minRows: 3 }" maxlength="50" show-word-limit  type="textarea" placeholder="请输入" />
    </el-form-item>

    <el-form-item label="主要工作内容:" class="labelHeight" style="width: 100%">
      <el-input v-model="form.mainWorkContent" :autosize="{ minRows: 3 }" maxlength="300" show-word-limit type="textarea"
        placeholder="请输入" />
    </el-form-item>

    <el-form-item label="简介:" class="labelHeight" style="width: 100%">
      <el-input v-model="form.intro" :autosize="{ minRows: 3 }" maxlength="500" show-word-limit type="textarea" placeholder="请输入" />
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
import * as proxy from '@/constants/proxy'
import request from '@/utils/request'
import UserListModal from '@/views/project/components/UserListModal/index.vue'
import PopupTreeInput from '@/views/science/components/PopupTreeInput/index.vue'
import SelectOption from '@/views/science/components/selectOption/index.vue'
import { onMounted, reactive, ref, watch } from 'vue'
import { useStore } from 'vuex'

// import { getOrgTree } from '../../api/technicalNorms'
// import { string } from 'mathjs'
// import DictItem from '@/views/system/dict-manage/components/dictItem.vue'
export default {
  components: {
    SelectOption,
    PopupTreeInput,UserListModal
  },
  emits: {
    valueFlag: null,
  },
  setup(props, { emit }) {
    const store = useStore()
    const labelPosition = ref('right')

    const deptForm = {
      parentId: 0,
      parentName: '',
    }
    const data = reactive({
      activeName: ref('first'),
      // 字典
      orgAllList:[],
      levelOptions:[],
      currentStage:[],
      business:[],
      editCondition:[],
      stateSelect:[],
      constructSelect:[],
      typeOptions:[],
      popupTreeProps: {
        label: 'name',
        children: 'children',
      },
      popupTreeData: [],
      dictCatalog: [],
      tableTreeData: [
        {
          children: [],
          // dictName: $i18n.t('message.dict.top'),
          dictName:'',
          id: undefined,
        },
      ],
      defaultExpandedKeys: [],
    })

    const form = reactive(store.state.technicalNorms.form)
    const value1 = ref('')

    watch(form, (newValue, oldValue) => {
      store.commit('technicalNorms/getForm', { ...form })
      console.log('在里面,',form);
    });

    const getUser =  ()=>{
      request({
        url: proxy.CHECC_API_CMS + '/user/getAll',
        method: 'get',
      }).then((res) => {
        data.stateSelect = res.data.data
      })
    }

    // 字典
    const affiliation = () => {
      request({
        url: proxy.CHECC_API_CMS + '/dictItem/codelist',
        method: 'post',
        data:["KJSL_STANDARD_LEVEL_CATEGORY","KJSL_PREPARATION_CATEGORY","KJSL_AT_PRESENT_STAGE","KJSL_PARTICIPATION_STATUS1","KJSL_BUSINESS_SECTOR","KJSL_STANDARD_LEVEL_CATEGORY"]

      }).then((res) => {
        data.orgAllList = res.data.data.KJSL_STANDARD_LEVEL_CATEGORY
        data.levelOptions = res.data.data.KJSL_PREPARATION_CATEGORY
        data.currentStage = res.data.data.KJSL_AT_PRESENT_STAGE
        data.business = res.data.data.KJSL_BUSINESS_SECTOR
        data.editCondition = res.data.data.KJSL_PARTICIPATION_STATUS1
      })
    }
    const changeValue = (item) => {
      form.levelName = item.itemText
      form.levelId = item.itemValue

      data.typeOptions = item.children
    }
    const changeValue1 = (item) => {
      form.classType = item.itemText
      form.classId = item.itemValue
    }
    const changeValue2 = (item) => {
      form.currentStage = item.itemText
      form.className = item.itemValue
    }
    const changeValue3 = (item) => {
      form.businessId = item.itemValue
      form.business = item.itemText
    }
    const changeValue4 = (item) => {
      form.editConditionId = item.itemValue
      form.editCondition = item.itemText
    }
    const changeValue5 = (item) => {
      form.rdDept = item.id
      form.rdDeptName = item.name
    }
    const changeValue6 = (item) => {
      form.contact = item.cname
      form.contactId = item.userId
    }
    const changeValue7 = (item) => {
      console.log('item',item);
      form.renameUnit = item.name
      form.renameUnitId = item.id

      // form.plaStatus = item.itemValue
      // form.plaStatusName = item.itemText
    }
    const findTreeData = async ()=>{

      return request({
                url: proxy.CHECC_API_CMS + "/org/getSysOrgList",
                method: "get",
            }).then(res => {
                data.popupTreeData = res.data.data
            })
    }
    const getParentMenuTree =(tableTreeDdata)=> {
      const parent = {
        parentId: 0,
        name: '顶级菜单',
        children: tableTreeDdata,
      }
      return [parent]
    }
    // 机构树选中
    const handleTreeSelectChange = (data)=> {
      form.undertakeUnitId = data.id
      form.undertakeUnit = data.name

    }

    const rules = reactive({
      name: [
        { required: true, message: '请输入标准名称', trigger: 'blur' },
      ],
      code: [
        { required: true, message: '请输入标准代码', trigger: 'blur', },
      ],
      version: [
        { required: true, message: '请输入标准版本号', trigger: 'blur', },
      ],
      levelName: [
        { required: true, message: '请选择标准级别', trigger: 'change', },
      ],
      classType: [
        { required: true, message: '请选择标准类别', trigger: 'change', },
      ],
      currentStage: [
        { required: true, message: '请选择现处阶段', trigger: 'change', },
      ],
      business: [
        { required: true, message: '请选择业务板块', trigger: 'change' },
      ],
      editCondition: [
        { required: true, message: '请选择参编情况', trigger: 'change' },
      ],
      projectApprovalDate: [
        { required: true, message: '请选择立项时间', trigger: 'change' },
      ],
      publicDate: [
        { required: true, message: '请选择发布时间', trigger: 'change' },
      ],
      projectChanger: [
        { required: true, message: '请输入项目负责人', trigger: 'blur' },
      ],
      contact: [
        { required: true, message: '请选择联系人', trigger: 'change' },
      ],
      managerUnit: [
        { required: true, message: '请输入管理机构', trigger: 'blur' },
      ],
      renameRank: [
        { required: true, message: '请选择署名排名', trigger: 'change' },
      ],
      renameUnit: [
        { required: true, message: '请选择署名单位', trigger: 'change' },
      ],
      undertakeUnit: [
        { required: true, message: '请选择', trigger: 'change,blur' },
      ]
    })

    const ruleFormRef = ref()
    const submitForm = async () => {
      await ruleFormRef.value.validate((valid) => {
        if (valid) {
          emit('valueFlag', true)
          console.log('submit!')
        } else {
          emit('valueFlag', false)
        }
      })
    }


    const handleChangeDate = (val) => {
      const year = val.getFullYear(); // 获取年份
      const month = (val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) : (val.getMonth() + 1); // 获取月份，需要加1
      const day = val.getDate() < 10 ? '0' + val.getDate() : val.getDate(); // 获取日期
      const formattedDate = `${year}-${month}-${day}`;
      form.projectApprovalDate = formattedDate
      store.commit('technologyNorms/getForm', { ...form })
    }

    const handleChangeDate1 = (val) => {
      const year = val.getFullYear(); // 获取年份
      const month = (val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) : (val.getMonth() + 1); // 获取月份，需要加1
      const day = val.getDate() < 10 ? '0' + val.getDate() : val.getDate(); // 获取日期
      const formattedDate = `${year}-${month}-${day}`;
      form.publicDate = formattedDate
      store.commit('technologyNorms/getForm', { ...form })
    }
    const handleChangeDate2 = (val) => {
      const year = val.getFullYear(); // 获取年份
      const month = (val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) : (val.getMonth() + 1); // 获取月份，需要加1
      const day = val.getDate() < 10 ? '0' + val.getDate() : val.getDate(); // 获取日期
      const formattedDate = `${year}-${month}-${day}`;
      form.effectDate = formattedDate
      store.commit('technologyNorms/getForm', { ...form })
    }
    const handleChangeDate3 = (val) => {
      const year = val.getFullYear(); // 获取年份
      const month = (val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) : (val.getMonth() + 1); // 获取月份，需要加1
      const day = val.getDate() < 10 ? '0' + val.getDate() : val.getDate(); // 获取日期
      const formattedDate = `${year}-${month}-${day}`;
      form.failureDate = formattedDate
      store.commit('technologyNorms/getForm', { ...form })
    }
    const handleChangeDate4 = (val) => {
      const year = val.getFullYear(); // 获取年份
      const month = (val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) : (val.getMonth() + 1); // 获取月份，需要加1
      const day = val.getDate() < 10 ? '0' + val.getDate() : val.getDate(); // 获取日期
      const formattedDate = `${year}-${month}-${day}`;
      form.startDate = formattedDate
      store.commit('technologyNorms/getForm', { ...form })
    }

    const handleChangeDate5 = (val) => {
      const year = val.getFullYear(); // 获取年份
      const month = (val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) : (val.getMonth() + 1); // 获取月份，需要加1
      const day = val.getDate() < 10 ? '0' + val.getDate() : val.getDate(); // 获取日期
      const formattedDate = `${year}-${month}-${day}`;
      form.endDate = formattedDate
      store.commit('technologyNorms/getForm', { ...form })
    }

    onMounted(() => {
      affiliation()
      getUser()
      findTreeData()
    });
    return {
      labelPosition,
      data,
      form,
      value1,
      rules,
      getParentMenuTree,
      findTreeData,
      submitForm,
      ruleFormRef,
      affiliation,
      handleChangeDate,
      handleChangeDate1,
      handleChangeDate2,
      handleChangeDate3,
      handleChangeDate4,
      handleChangeDate5,
      changeValue,
      changeValue1,
      changeValue2,
      changeValue3,
      changeValue4,
      changeValue5,
      changeValue6,
      changeValue7,
      deptForm,
      getUser,
      handleTreeSelectChange
    }
  },
}
</script>
<style lang="scss" scoped>
.demo-form-inline .el-form-item {
  width: 30%;
}

:deep(.labelHeight .el-form-item__label) {
  line-height: 20px;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-date-editor.el-input__inner) {
  width: 100%;
}

:deep(.demo-form-inline .el-select) {
  width: 100%;
  margin: 0;
}

.el-select {
  width: 100%;
  margin: 0;
}

.selectLabel {
  width: 70%;
  min-height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
}

.addLabel {
  display: inline-block;
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #169bd5;
  border-radius: 6px;
  color: #fff;
  margin-left: 15px;
  margin-top: 6px;
  vertical-align: top;
}

.unitBox {
  width: 100%;
  margin: 30px 0;

  .title {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
  }

  .tagBox {
    line-height: 40px;
    margin-top: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 15px;
  }
}

.el-tag {
  margin-right: 10px;
}
</style>
